<template>
  <div>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="search">
          <el-form :inline="true" :model="query">
            <el-form-item class="text" label="分类名称：">
              <el-input
                placeholder="请输入分类名称"
                v-model="query.categoryName"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item class="text" label="分类摘要：">
              <el-input
                placeholder="请输入分类摘要"
                v-model="query.description"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <!--工具栏-->
    <el-row style="padding: 5px">
      <el-col :span="24">
        <div class="tools">
          <el-button @click="handleAdd" size="mini" icon="el-icon-plus" type="primary">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="width: auto;">
          <el-table
            :data="page.list"
            stripe
            style="width: 100%;">
            <el-table-column
              type="selection"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column
              label="分类编号"
              type="index"
              width="180">
            </el-table-column>
            <el-table-column
              prop="categoryName"
              label="分类名称"
              v-model="query.categoryName"
              width="250">
            </el-table-column>
            <el-table-column
              prop="description"
              v-model="query.description"
              label="分类摘要">
            </el-table-column>


            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <el-button
                  size="mini"
                  type="text"
                  style="color: red"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 15px;text-align: right;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pageNo"
              :page-sizes="[10,20,50,100, 200, 300, 400]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="新增分类"
      :visible.sync="addDialogVisible"
      width="30%">
      <el-form :inline="true" :model="category" label-width="180px">
        <el-row>
        </el-row>
        <el-row>
          <el-form-item class="text" label="分类名称:">
            <el-input
              placeholder="请输入分类名称"
              v-model="category.categoryName"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="分类摘要:">
            <el-input
              placeholder="请输入该分类的简要摘要"
              v-model="category.description"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCategory">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="修改分类"
      :visible.sync="editDialogVisible"
      width="30%">
      <el-form :inline="true" :model="query" label-width="180px">
        <el-row>
        </el-row>
        <el-row>
          <el-form-item class="text" label="分类名称:">
            <el-input
              placeholder="请输入分类名称"
              v-model="query.categoryName"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="分类摘要:">
            <el-input
              placeholder="请输入该分类的简要摘要"
              v-model="query.description"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateCategory">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

import {categoryAll, deleteCategoryById, updateCategory, addCategory} from "../../api/category";

export default {
  name: "Home",
  inject: ['reload'],
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      category: {
        id: '',
        avatar: '',
        categoryName: '',
        description: '',
      },
      query: {
        pageNo: 1,
        pageSize: 10,
        categoryName: '',
        description: '',
        id: '',
      },
      row: '',
      page: {
        count: 0,
        pageNumber: 1,
        pageSize: 10,
        list: []
      },
      searchData: {
        input1: "",
        input2: "",
      },
    }
  },
  created() {
    this.categoryAll();
  },

  methods: {
    categoryAll() {
      categoryAll(this.query).then(resp => {
        this.page.list = resp.data.list;
        this.page.count = resp.data.total;
      })
    },
    addCategory() {
      console.log(this.category)

      addCategory(this.category).then(resp => {
        if (resp.success) {
          this.reload();
          this.$message({
            type: 'success',
            message: '新增成功'
          });
        }else {
          this.reload();
          this.$message({
            type: 'error',
            message: '新增失败'
          });
        }
      })
    },
    updateCategory() {
      console.log(this.category)
      this.category.categoryName = this.query.categoryName;
      this.category.description = this.query.description;
      this.category.id = this.query.id;
      updateCategory(this.category).then(resp => {
        if (resp.success) {
          this.reload();
          this.$message({
            type: 'success',
            message: '更新成功'
          });
        }else {
          this.reload();
          this.$message({
            type: 'error',
            message: '更新失败'
          });
        }
      })
    },
    onSubmit() {
      this.categoryAll()
    },
    onReset() {
      this.query.categoryName = "";
      this.query.description = "";
      this.categoryAll()
    },
    handleAdd() {
      this.addDialogVisible = true;
    },
    refresh() {
      this.$NProgress.start();
      this.$NProgress.done()
    },
    handleEdit(index, row) {
      this.query = row;
      this.editDialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(row)
      this.$confirm('是否确认删除分类名为"' + row.categoryName + '"的分类??', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCategoryById(row.id).then(resp => {
          if (resp.success) {
            this.reload();
            this.$message({
              type: 'success',
              message: '删除成功'
            });
          } else {
            this.$message({
              type: 'error',
              message: '删除失败'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    handleSizeChange(size) {
      this.query.pageSize = size;
      this.categoryAll();
    },
    handleCurrentChange(currentPage) {
      this.query.pageNo = currentPage;
      this.categoryAll();
    },

  }
}
</script>
<!--公共样式-->
<style>

</style>
